<template>
  <div class="register_wrapper">
    <div class="register_content">
      <div style="text-align: center;padding-top: 50px"><img src="../assets/logo.png" alt="" style="width: 50px;"></div>
      <div class="register_item">
        <p>用户名：</p>
        <div class="error" v-if="usernameValid">{{username==''?'该项为必填项。':'格式不正确。'}}</div>
        <!--@focus  @blur-->
        <input type="text" v-model="username" placeholder="6-20个字符" @blur="checkUsername">
      </div>
      <div class="register_item">
        <p>密码：</p>
        <div class="error" v-if="passwordValid">{{password==''?'该项为必填项。':'格式不正确。'}}</div>
        <input type="password" v-model="password" placeholder="至少包含大小写、数字、特殊字符三种的8-32个字符" @blur="checkPassword">
      </div>
      <div class="register_item">
        <p>重复密码：</p>
        <div class="error" v-if="passwordConfirmValid">{{passwordConfirm==''?'该项为必填项。':'两次输入密码不一致。'}}</div>
        <input type="password" v-model="passwordConfirm" placeholder="至少包含大小写、数字、特殊字符三种的8-32个字符"
               @blur="confirmPassword">
      </div>
      <div class="register_item">
        <p>邮箱：</p>
        <div class="error" v-if="mailValid">{{mail==''?'该项为必填项。':'无效的邮箱'}}</div>
        <input type="text" v-model="mail" placeholder="请输入"
               @blur="confirmMail">
      </div>
      <div class="register_item">
        <input type="text" v-model="code" class="code"><img :src="imgUrl" alt="" @click="getCode" class="code_image">
      </div>
      <div class="register">
        <button @click="register"
                :disabled="usernameValid || mailValid || passwordValid || passwordConfirmValid || (code=='')"
                :class="(usernameValid || mailValid || passwordValid || passwordConfirmValid || (code==''))?'dark_button':''">
          注册
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import {checkUsername, checkPassword, checkMail} from "../js/utils";
  import {apiPre} from '../js/config'

  export default {
    name: "register",
    data() {
      return {
        username: '',
        password: '',
        passwordConfirm: '',
        code: '',
        imgUrl: '',
        mail: '',
        usernameValid: false,
        passwordValid: false,
        passwordConfirmValid: false,
        mailValid: false
      }
    },
    computed: {},
    created() {
      this.getCode();
    },
    methods: {
      getCode() {
        axios.get(apiPre + 'register').then((res) => {
          // console.log('res', res);
          this.imgUrl = 'data:image/jpg;base64,' + res.data;
        }).catch((err) => {
          console.log('err', err);
          this.$Notice.error({desc: '获取验证码失败', duration: 2})
        })
      },
      register() {
        axios.post(apiPre + 'register', {
          username: this.username,
          password: this.password,
          code: this.code,
          mail: this.mail
        }).then((res) => {
          if (res.data == 0) {
            this.$Notice.error({desc: '验证码错误', duration: 2});
            this.getCode();
          } else if (res.data == 2) {
            this.$Notice.error({desc: '用户已存在', duration: 2});
            this.getCode();
          } else if (res.data == 4) {
            this.$Notice.warning({desc: '该邮箱已被注册', duration: 2})
          } else {
            this.$Notice.success({desc: '注册成功', duration: 2})
            this.$router.push('/login');
          }
        }).catch((err) => {
          console.log('err', err);
          this.$Notice.error({desc: '注册失败', duration: 2})
          this.getCode();
        })
      },
      checkUsername() {
        // var reg = /^([a-z0-9\.\@\!\#\$\%\^\&\*\(\)]){6,20}$/i;
        if (checkUsername(this.username)) {
          this.usernameValid = false;
        } else {
          this.usernameValid = true;
        }
      },
      checkPassword() {
        // var reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^\sA-Za-z0-9])\S{8,32}$/;
        if (checkPassword(this.password)) {
          this.passwordValid = false;
        } else {
          this.passwordValid = true;
        }
      },
      confirmPassword() {
        // var reg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[^\sA-Za-z0-9])\S{8,32}$/;
        if (checkPassword(this.password) && this.password == this.passwordConfirm) {
          this.passwordConfirmValid = false;
        } else {
          this.passwordConfirmValid = true;
        }
      },
      confirmMail() {
        if (checkMail(this.mail)) {
          this.mailValid = false;
        } else {
          this.mailValid = true;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .register_wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    p {
      margin: 10px 0;
      font-size: 16px;
      font-weight: 500;
    }
    input {
      width: 300px;
      height: 25px;
      border-radius: 3px;
      border: 1px solid #dddee1;
      padding: 0 5px;
    }
  }

  .register_content {
    margin: 0 auto;
    width: 400px;
    padding: 0 50px;
    background-color: rgb(237, 237, 237);
    height: 100%;
  }

  .error {
    font-size: 10px;
    color: red;
  }

  .code {
    width: 100px !important;
  }

  .code_image {
    vertical-align: bottom;
  }

  .register {
    margin-top: 20px;
    text-align: center;
    button {
      background-color: #2d8cf0;
      width: 100px;
      height: 30px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      color: #fff;
      font-size: 16px;
    }
  }

  .register_item {
    margin-bottom: 20px;
  }

  .dark_button {
    //鼠标变为禁用
    cursor: not-allowed;
    background-color: rgb(162, 161, 158) !important;
  }
</style>
